<template>
  <div class="msgtable">
    <h3>{{ props.title }}</h3>
    <el-table
      :data="props.tableData"
      style="width: 90%"
      :header-cell-style="{
        background: '#E0E0E0',
        color: '#2B2B2B',
        fontWeight: 500
      }"
    >
      <el-table-column label="" width="180" show-overflow-tooltip>
        <template #default="scope">
          {{ filterType(scope.row.msgType) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template #default="scope">
          <el-switch
            v-model="scope.row.openFlag"
            :active-value="1"
            :inactive-value="2"
            :disabled="!buttonDisplayOrNot(props.buttonCodes, 'qyEditBtn')"
            style="
              --el-switch-on-color: var(--el-color-primary);
              --el-switch-off-color: #fa4016;
            "
            @change="(val: any) => {
                changeStatus(val, scope.row)
              }
              "
          />
        </template>
      </el-table-column>
      <el-table-column label="提醒时间" width="180" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.timeWayName }}
        </template>
      </el-table-column>
      <el-table-column label="提醒人员" width="180" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.remindRole }}
        </template>
      </el-table-column>
      <el-table-column label="提醒方式" width="180" show-overflow-tooltip>
        <template #default="scope">
          {{ flterReminWay(scope.row.remindWay) }}
        </template>
      </el-table-column>
      <el-table-column label="提醒模板" prop="content" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button
            plain
            color="#1962E0"
            @click="handleEdit(scope.row)"
            v-if="buttonDisplayOrNot(props.buttonCodes, 'qyEditBtn')"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- @flash="flash" -->
    <MsgDialog :myDialog="editDialog" :row="rowItem"></MsgDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineAsyncComponent } from 'vue'
import { ElMessage } from 'element-plus'
import { updateOpenFlag } from '/@/api/setting/enterpriseInfo'
import { buttonDisplayOrNot } from '../../../utils/buttonBoolean'
const MsgDialog = defineAsyncComponent(
  () => import('/@/views/setting/components/MsgDialog.vue')
)

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  buttonCodes: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: () => ''
  }
})

// 修改状态
const changeStatus = async (val: any, row: any) => {
  if (row.id) {
    let res = await updateOpenFlag({ id: row.id, openFlag: val })
    if (res.code == 0) {
      ElMessage.success('修改成功！')
    }
  }
}

let [editDialog, rowItem] = [ref(false), ref({})]
const handleEdit = (row: any) => {
  rowItem.value = JSON.parse(JSON.stringify(row))
  editDialog.value = !editDialog.value
}

const filterType = computed(() => {
  return function (type: any) {
    let txt = ''
    switch (type) {
      case 1:
        txt = '报修提交提醒'
        break
      case 2:
        txt = '报修信息审核结果'
        break
      case 3:
        txt = '维修验证提醒'
        break
      case 4:
        txt = '维修验证结果提醒'
        break
      case 5:
        txt = '维保计划发布提醒'
        break
      case 6:
        txt = '维保任务消息提醒'
        break
      case 7:
        txt = '点检计划发布提醒'
        break
      case 8:
        txt = '点检任务消息提醒'
        break
      case 9:
        txt = '备件申请消息提醒'
        break
      case 10:
        txt = '备件审核消息提醒'
        break
      case 11:
        txt = '备件退还消息提醒'
        break
      case 12:
        txt = '备件退还审核结果提醒'
        break
      case 13:
        txt = '库存不足消息提醒'
        break
      case 14:
        txt = '备件过期消息提醒'
        break
      case 15:
        txt = '转交消息提醒'
        break
      case 16:
        txt = '转交消息提醒'
        break
      default:
        txt = '无'
    }
    return txt
  }
})

const flterTimeWay = computed(() => {
  return function (type: string) {
    let list = type.split(',')
    let way = ''
    list.forEach((e, i) => {
      let txt = ''
      switch (parseInt(e)) {
        case 1:
          txt = '立刻'
          break
        case 2:
          txt = '提前30分钟'
          break
        case 3:
          txt = '提前一天'
          break
        case 4:
          txt = '提前3天'
          break
        case 5:
          txt = '提前5天'
          break
        default:
          txt = '无'
      }
      way += `${txt}${list.length == i + 1 ? ' ' : ' 、'} `
    })
    return way
  }
})

const flterReminWay = computed(() => {
  return function (type: string) {
    let list = type.split(',')
    let way = ''
    list.forEach((e, i) => {
      let txt = ''
      switch (parseInt(e)) {
        case 1:
          txt = '消息提醒'
          break
        case 2:
          txt = '短信提醒'
          break
        default:
          txt = '无'
      }
      way += `${txt}${list.length == i + 1 ? ' ' : ' 、'} `
    })
    return way
  }
})
</script>

<style scoped lang="scss">
.msgtable {
  h3 {
    font-size: var(--next-font-size18);
    color: #2b2b2b;
    margin: 15px 0;
  }
}
</style>
